.story-container {
  border-top: 1px solid #90c31f;
  margin-top: 70px;
  min-height: 1000px;
  .title {
    width: 159px;
    height: 100px;
    margin: 50px auto 10px;
  }
  .story-item {
    padding-bottom: 60px;
    $item-size:340px;
    ul {
      width: $item-size * 3;
      height: auto;
      margin: 20px auto 0;
      background-color: rgba(228,228,228,1);;
      li:nth-child(odd){
        .item-image{
          top:0;
        }
        .item-content{
          bottom:0;
        }
      }
      li:nth-child(even){
        .item-image{
          top:50%;
        }
        .item-content{
          top:0;
        }
      }
    }
    li {
      float: left;
      width: $item-size;
      height: $item-size *2;
      overflow: hidden;
      a:hover{
        .item-content {
          height: $item-size * 2;
        }
      }
      a {
        display: inline-block;
        width: 100%;
        height: 100%;
        position: relative;
      }
      .item-image{
        position: absolute;
        width: $item-size;
        height: $item-size;
        left:0;
      }
      .item-content{
        position: absolute;
        left:0;
        width: $item-size;
        height: $item-size;
        padding: 10px;
        transition: all 0.8s ease;
        .item-bg{
          position: absolute;
          top:0;
          left:0;
          width: 100%;
          height: 100%;
          padding: 10px;
          div{
            width: 100%;
            height: 100%;
            background-color: rgba(228,228,228,0.8);
          }
        }
        .item-body{
          text-align: center;
          display: table;
          width: 100%;
          height: 100%;
          z-index: 4;
          position: relative;
          transition: all 0.8s ease;
          h4,div{
            color:#282828 !important;
          }
          >div{
            display: table-cell;
            vertical-align: middle;
          }
        }
      }
    }

  }

}
